<template>
  <div class="app">
    <el-header class="header">
      <div class="title">故障扫描及检测平台</div>
      <router-link style="align-content: center" to="/">首页</router-link>
    </el-header>
    <div class="container">
      <el-aside class="aside" width="200px">
        <el-menu>
          <el-menu-item style="color: #2fb6ff; display: flex; align-items: center;">软件错误处理检测</el-menu-item>
        </el-menu>
        <el-menu>
          <el-menu-item>导航1</el-menu-item>
          <el-menu-item>导航2</el-menu-item>
          <el-menu-item>导航3</el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <div class="info-box">
          EH-Miner可以分析大量软件源码中针对库函数调用的错误处理方法，挖掘出错误处理规则，最后面向目标软件代码检测错误处理缺陷。总得分为两个大的步骤：一是错误规则挖掘，二是错误缺陷检测。
        </div>

        <div id="button-box">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-button class="upload-button" style="text-align: center;" type="primary" @click="GetResource">连接测试按钮
              </el-button>
            </el-col>
            <el-col :span="6">
              <el-upload
                  ref="fileRef"
                  :auto-upload="false"
                  :headers="headers"
                  :limit="1"
                  accept=".tar.gz,.tar.bz,.tar"
                  action="#"
                  class="upload-demo"
                  type="file"
                  @change="handleChange"
              >
                <el-button type="primary">select file</el-button>
                <div class="el-upload-tip">
                  (.tar.gz/.tar.bz/.tar) files
                </div>

              </el-upload>
            </el-col>
            <el-button class="ml-3" type="success" @click="uploadBtn">
              upload to server
            </el-button>

            <el-col :span="6">
              <el-button class="" type="default" @click="RunJenkins">start test</el-button>
            </el-col>
          </el-row>
        </div>
        <el-card class="ResultText-card">{{ ResultText }}</el-card>
        <br>
        <el-card class="box-card">
          <el-link href="http://192.168.0.41/ehminer/result/" target="_blank">输出内容网址，点击跳转</el-link>
        </el-card>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {
  ElHeader,
  ElAside,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElButton,
} from 'element-plus';
import axios from 'axios';

let datas = ref();
let fileRef = ref(); //上传的文件对象
let FileName = ref(); //返回的文件名
let ResultText = ref(); //build 执行过程信息
let ReFileName = ref();
let DirName = ref();

// 设置请求头
const headers = {
  'Content-Type': 'multipart/form-data'
};

// 选择文件时被调用，将它赋值给fileRef
const handleChange = (file) => {
  fileRef.value = file.raw; // 获取原始文件对象
};


// 确定上传
function uploadBtn() {
  const submitData = new FormData();
  submitData.append('file1', fileRef.value);
  axios.post('/upload', submitData, {
    baseURL: '/ok',
    headers: headers,
    responseType: 'json'
  }).then(function (response) {
    datas.value = response.data;
    if (response.status === 200) {
      alert(datas.value.message);
      console.log(datas.value.message);
      console.log(datas.value.ReFileName);
      console.log(datas.value.DirName);
      FileName.value = datas.value.ReFileName
      DirName.value = datas.value.DirName
    } else {
      alert(datas.value.message);
      console.log(datas.value);
    }
  });
}

function RunJenkins() {
  console.log("file name : ", FileName.value)
  console.log("DirName : ", DirName.value)

  axios.post('/RunJenkins', {
    filename: FileName.value, //传递参数
    dirname: DirName.value,
  }, {
    baseURL: '/ok',
    headers: headers,
    responseType: 'json'
  }).then(function (response) {
    datas.value = response.data;
    if (response.status === 200) {
      alert('Run Jenkins successful');
      console.log(datas.value.buildOutput);
      ResultText.value = datas.value.buildOutput
    } else {
      alert('Run Jenkins failed');
      console.log(datas.value);
    }
  });
  FileName.value = ""
  DirName.value = ""
}

function GetResource() {
  axios.get('/ping', {
    baseURL: '/ok',
    timeout: 1000,
    headers: headers,
    responseType: 'json'
  }).then(function (response) {
    datas.value = response.data;
    if (response.status === 200) {
      alert('connection successful');
      console.log(datas.value);
    } else {
      alert('connection failed');
      console.log(datas.value);
    }
  });
}
</script>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.container {
  flex: 1;
  display: flex;
}

.header {
  background: cornflowerblue;

  display: flex;
  flex-direction: column;
}

el-menu-item {
  background: #4667dc;
}

main {
  padding: 10px;
}

.info-box {
  background-color: #e0ffe0;
  align-items: self-start;
  justify-content: center;
  display: flex;
  padding: 50px;
  flex-flow: column;
}

#button-box {
  margin: 15px;
}

.el-upload-tip {
  margin: 10px;
}

.upload-button {
  display: block;
}

.ResultText-card {
  display: flex;
  flex-flow: column;
}
</style>
